<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <style>
    input{
        width:250px;
        height:30px;
        border-radius: 6px;
        border:1px solid #aaa;
        outline:none;
    }
    </style>
</head>
<body>
    <div id="test">
        <input type="text" @keyup.enter="submit">
        <p>{{title}}</p>
        <img v-bind:src="url" alt="">
    </div>
    <script>
      new Vue({
          el:"#test",
          data:{
              title:"三体",
              url:"https://img1.doubanio.com/view/subject/s/public/s2768378.jpg",
          },
          methods:{
              submit(event){
                  var self=this;
                  let value=event.target.value;
                  let url=`https://douban.uieee.com/v2/movie/search?q=${value}&count=1`;
                  $.ajax({
                      url,
                      type:"get",
                      dataType:"jsonp",
                      success(res){
                          self.handleData(res);
                      }
                  })
              },
              handleData(res){
                  let title=res.subjects[0].title;
                  let url=res.subjects[0].images.small;
                  this.title=title;
                  this.url=url;
              }
          }
      })
    </script>
</body>
</html>